<template>
  <div v-loading="loading">
    <table class="table table-bordered mt-3 mb-1">
      <tbody>
        <tr>
          <td colspan="10" class="font-weight-bold" data-font-bold="true">
            股东出资信息
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEdit">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td width="10%">股东名称</td>
          <td colspan="2" width="18%">身份证号/资格证号码</td>
          <td width="12%">认缴出资额(万元)</td>
          <td colspan="2" width="15%">出资方式</td>
          <td width="12%">持股比例</td>
          <td width="15%">认缴出资日期</td>
          <td colspan="2" width="18%">联系电话</td>
        </tr>
        <tr v-if="!shareholderData.length">
          <td>-</td>
          <td colspan="2">-</td>
          <td>-</td>
          <td colspan="2">-</td>
          <td>-</td>
          <td>-</td>
          <td colspan="2">-</td>
        </tr>
        <tr v-for="(item, index) in shareholderData" :key="index">
          <td>{{ item.real_name || '-' }}</td>
          <td colspan="2">{{ item.id_card || '-' }}</td>
          <td>{{ item.invest_funds || '-' }}</td>
          <td colspan="2">{{ item.invest_method || '-' }}</td>
          <td>{{ item.sh_rate | pureUnit('%') }}</td>
          <td>{{ $utils.dateFormat(item.invest_rate, 'yyyy-MM-dd') || '-' }}</td>
          <td class="p-0" colspan="2">
            {{ item.mobile_no || '-' }}
          </td>
        </tr>
      </tbody>
    </table>

    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      append-to-body
      title="修改股东信息"
      width="1000px"
    >
      <table class="table table-bordered mt-3 mb-1">
        <tbody>
          <tr>
            <td width="10%">股东名称</td>
            <td colspan="2" width="18%">身份证号/资格证号码</td>
            <td width="15%">认缴出资额</td>
            <td colspan="2" width="12%">出资方式</td>
            <td width="12%">持股比例</td>
            <td width="15%">认缴出资日期</td>
            <td colspan="2" width="18%">联系电话</td>
          </tr>
          <tr v-for="(p, index) of editData" :key="index">
            <td class="report-input-td">
              <el-input
                v-model="p.real_name"
                class="text-center"
                placeholder="输入股东名称"
              ></el-input>
            </td>
            <td class="report-input-td" colspan="2">
              <el-input
                v-model="p.id_card"
                class="text-center"
                placeholder="输入身份证号/资格证号码"
              ></el-input>
            </td>
            <td class="report-input-td">
              <el-input
                v-model="p.invest_funds"
                class="text-center"
                placeholder="输入金额"
                type="number"
              >
                <span slot="append">万元</span>
              </el-input>
            </td>
            <td class="report-input-td" colspan="2">
              <el-input
                v-model="p.invest_method"
                class="text-center"
                placeholder="输入出资方式"
              ></el-input>
            </td>
            <td class="report-input-td">
              <el-input
                v-model="p.sh_rate"
                v-input-number="{ min: 0, max: 100, fixed: 2 }"
                class="text-center"
                placeholder="持股比例"
              >
                <span slot="append">%</span>
              </el-input>
            </td>
            <td class="report-input-td">
              <el-date-picker
                v-model="p.invest_rate"
                class="w-100"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </td>
            <td class="report-input-td" colspan="2">
              <div class="d-flex align-items-center">
                <el-input
                  v-model="p.mobile_no"
                  class="text-center flex-1"
                  placeholder="输入联系电话"
                ></el-input>
                <el-button
                  class="td-inner-btn px-3 text-danger"
                  type="text"
                  @click="deleteData(p.datum_customer_shareholder_id, index)"
                >
                  <i class="fa fa-trash"></i>
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <el-button-group class="mb-2 mt-1">
        <el-button size="small" @click="editRowAdd">
          <i class="fa fa-indent"></i>
          添加一行
        </el-button>
      </el-button-group>
      <div class="text-center">
        <el-button type="primary" @click="saveData" :loading="saveLoading" style="min-width: 100px">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    shareholders: {
      type: Array,
      default: () => [],
    },
    queryId: {
      type: String,
      default: '',
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      shareholderData: [],
      visible: false,
      saveLoading: false,
      tableName: 'datum_customer_shareholder',
      //   customerFamily: [],
      editData: [],
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
  },
  watch: {
    shareholders: {
      handler: function () {
        this.shareholderData = this.shareholders.map(item => {
          return { ...item }
        })
        this.editData = this.shareholderData.map(item => {
          return { ...item }
        })
        if (this.editData.length < 5) {
          this.addTemp(5 - this.editData.length)
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    handlerEdit() {
      this.editData = []
      this.visible = true
      this.editData = this.shareholderData.map(item => {
        return { ...item }
      })
      if (this.editData.length < 5) {
        this.addTemp(5 - this.editData.length)
      }
    },
    addTemp(len) {
      for (let i = 0; i < len; i++) {
        this.editData.push({ invest_method: '货币' })
      }
    },
    editRowAdd() {
      this.addTemp(1)
    },
    deleteItem(index) {
      this.editData.splice(index, 1)
    },
    saveData() {
      let data = []
      for (let item of this.editData) {
        if (item.datum_customer_shareholder_id && !item.real_name) {
          return this.$message.warning('请输入姓名')
        }
        if (item.real_name) {
          const dataItem = {
            customer_related_id: this.queryId,
            real_name: item.real_name,
            id_card: item.id_card,
            invest_funds: item.invest_funds,
            invest_method: item.invest_method,
            invest_rate: item.invest_rate,
            sh_rate: item.sh_rate,
            mobile_no: item.mobile_no,
          }
          if (item.datum_customer_shareholder_id) {
            dataItem.datum_customer_shareholder_id = item.datum_customer_shareholder_id
          }
          data.push(dataItem)
        }
      }
      if (!data.length) {
        return
      }
      this.saveLoading = true
      this.$api
        .updateBatch(this.$serviceName, this.tableName, data)
        .then(() => {
          this.$message.success('保存成功')
          this.$emit('success', true)
          this.visible = false
        })
        .catch(() => {
          this.$message.error('保存失败')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    deleteData(id, index) {
      if (!id) {
        this.deleteItem(index)
        return
      }
      this.$utils
        .msgbox({
          message: '确定删除?',
          beforeClose: () => this.$api.deleteData(this.$serviceName, this.tableName, id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.$emit('success', true)
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/gov/components/creditFile/style.scss';
</style>
